<template>
 <div class="footer">
  <div class="page-auto footer-auto">
    <div class="footer-left">
      <div>关注我们</div>
      <div class="footer-logo">
        <div class="panel">
          <img class="pic" src="@/assets/images/pic/logo.png" alt="">
          <p class="text">微信扫码<br />加呆猪好友</p>
        </div>
        <div class="panel">
          <img class="pic" src="@/assets/images/pic/logo.png" alt="">
          <p class="text">QQ扫码<br />进入呆猪文化群</p>
        </div>
        <div class="panel">
          <img class="pic" src="@/assets/images/pic/logo.png" alt="">
          <p class="text">微信扫码<br />进入小程序</p>
        </div>
        <div class="panel">
          <img class="pic" src="@/assets/images/pic/logo.png" alt="">
          <p class="text">扫一扫<br />填写问卷</p>
        </div>
      </div>
    </div>
    <div class="footer-center">
      <div>关注我们</div>
      <div>
        <p>用户协议</p>
        <p>隐私政策</p>
      </div>
    </div>
    <div class="footer-right">
      <img src="@/assets/images/pic/footer-logo.png" alt="">
    </div>
  </div>
  <div class="page-auto copyright">
    Copyright © 1998 - 2024 DaiZhu. All Rights Reserved. 呆猪 版权所有
    <span>粤公网安备 44030502008569号</span>
  </div>
</div>
</template>

<script lang="ts" setup>
</script>

<style scoped lang="scss">
.page-auto {
  width: 1000px;
  margin: 0 auto;
}
.footer {
  background: #FF9696;
  color: #fff;
  margin-top:82px;
  padding-top: 58px;
  .footer-logo {
    display: flex;
    margin-top: 27px;
    .panel {
      width: 120px;
      text-align: center;
      margin-right: 30px;
      .text {
        font-size: 14px;
      }
      .pic {
        width: 120px;
        height: 120px;
      }
    }
  }
  .footer-auto {
    display: flex;
    position: relative;
  }
  .footer-left {
  }
  .footer-center {
    margin-left: 30px;
  }
  .footer-right {
    position: absolute;
    right: 0;
    top: 40px;
    img {
      width: 170px;
    }
  }
  .copyright {
    border-top: 1px solid #FFA6A6;
    text-align: center;
    padding: 19px 0 17px 0px;
    font-size: 14px;
    span {
      margin-left: 34px;
    }
  }
}
</style>
